<template>
  <div class="chart-component" :style="backgroundStyle">
    <!-- <ChartTitle :title-config="info.titleConfig || {}" />
    <div ref="funnelChartRef" class="chart-canvas funnel-chart-canvas"></div> -->
  </div>
</template>

<script>
// import {
//   defineComponent,
//   computed,
//   watch,
//   ComputedRef,
//   onMounted,
//   ref,
// } from 'vue';
// import * as echarts from 'echarts';
// import { debounce } from '@/utils/commonUtils';
// import computedBackgroundStyle from '@/components/charts/supplement/computedBackgroundStyle';

// export default defineComponent({
//   name: 'FunnelChart',
//   props: {
//     info: Object,
//   },
//   setup(props) {
//     const backgroundStyle: ComputedRef = computed(() => {
//       return computedBackgroundStyle(props);
//     });

//     const size: ComputedRef = computed(() => props.info?.size);
//     const funnelChartRef: any = ref(null);

//     const options = {
//       tooltip: {
//         trigger: 'item',
//         formatter: '{a} <br/>{b} : {c}%',
//       },
//       grid: {
//         left: 20,
//         top: 20,
//         right: 20,
//         bottom: 20,
//         containLabel: true,
//       },
//       toolbox: {
//         feature: {
//           dataView: { readOnly: false },
//           restore: {},
//           saveAsImage: {},
//         },
//       },
//       legend: {
//         data: ['展现', '点击', '访问', '咨询', '订单'],
//       },

//       series: [
//         {
//           name: '漏斗图',
//           type: 'funnel',
//           left: '10%',
//           top: 60,
//           //x2: 80,
//           bottom: 60,
//           width: '80%',
//           // height: {totalHeight} - y - y2,
//           min: 0,
//           max: 100,
//           minSize: '0%',
//           maxSize: '100%',
//           sort: 'descending',
//           gap: 2,
//           label: {
//             show: true,
//             position: 'inside',
//           },
//           labelLine: {
//             length: 10,
//             lineStyle: {
//               width: 1,
//               type: 'solid',
//             },
//           },
//           itemStyle: {
//             borderColor: '#fff',
//             borderWidth: 1,
//           },
//           emphasis: {
//             label: {
//               fontSize: 20,
//             },
//           },
//           data: [
//             { value: 60, name: '访问' },
//             { value: 40, name: '咨询' },
//             { value: 20, name: '订单' },
//             { value: 80, name: '点击' },
//             { value: 100, name: '展现' },
//           ],
//         },
//       ],
//     };

//     let funnelChart: any = null;

//     const createChart = () => {
//       if (funnelChartRef.value) {
//         funnelChart = echarts.init(funnelChartRef.value);
//         funnelChart.setOption(options);
//       }
//     };

//     const debounceResize = debounce(() => {
//       if (funnelChart) {
//         funnelChart.dispose();
//         funnelChart = null;
//       }
//       createChart();
//     }, 200);

//     onMounted(() => createChart());

//     watch(size, (newVal: any, oldVal: any) => {
//       if (newVal.width !== oldVal.width || newVal.height !== oldVal.height) {
//         debounceResize();
//       }
//     });

//     watch(
//       () => props.info?.titleConfig?.visible,
//       () => debounceResize()
//     );

//     return {
//       funnelChartRef,
//       backgroundStyle,
//     };
//   },
// });
</script>
